<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝鸡市残疾人服务平台</title>
    <link rel="stylesheet" href="consequence.css">
</head>
<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                    <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="explain.html"><li><span style="color: white">器械说明</span></li></a>
                    <a href="shopping.html"><li><span style="color: white">商城</span></li></a>
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                    <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                
                </div>
               
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>个人中心</span>
                    
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                    <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                    <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                    
                </ul>
            </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
    </script>
       <nav class="sidebar">...</nav>
       <!-- 主内容区 -->
       <div class="container">
        <!-- 筛选栏 -->
        <div class="filter-bar">
            <select class="filter-select" id="statusFilter">
                <option value="all">全部状态</option>
                <option value="passed">面试通过</option>
                <option value="offer">收到Offer</option>
                <option value="pending">待定中</option>
            </select>
        </div>
        <!-- 结果列表 -->
        <div class="result-grid">
            <!-- 面试通过 -->
            <div class="result-card" data-status="passed">
                <div class="card-header">
                    <h2 class="position-title">岗位1</h2>
                    <div class="status-badge status-passed">
                        <span>面试通过</span>
                    </div>
                </div>
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">面试时间</div>
                        <div class="detail-content">2025-02-15 14:30</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">面试官</div>
                        <div class="detail-content">XX经理</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">综合评分</div>
                        <div class="detail-content">
                            <div class="rating-stars">
                                ★★★★☆ 4.5
                            </div>
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">公司名称</div>
                        <div class="detail-content">公司1</div>
                    </div>
                </div>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="detail-label">最新进展</div>
                        <div class="detail-content">HR面试已完成，正在走录用审批流程</div>
                    </div>
                </div>
                <div class="action-group">
                    <button class="action-btn primary-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        查看详情
                    </button>
                    <button class="action-btn secondary-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                        </svg>
                        联系HR
                    </button>
                </div>
            </div>
            <!-- Offer卡片 -->
            <div class="result-card" data-status="offer">
                <div class="card-header">
                    <h2 class="position-title">岗位2</h2>
                    <div class="status-badge status-offer">
                        <span>收到Offer</span>
                    </div>
                </div>
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">薪资范围</div>
                        <div class="detail-content">¥25k - ¥35k · 15薪</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">答复截止</div>
                        <div class="detail-content">
                            <span class="deadline-countdown" style="color: var(--success);">
                                ⏳ 剩余3天
                            </span>
                            2025-01-05
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">福利待遇</div>
                        <div class="detail-content">六险一金 · 年度旅游</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">公司名称</div>
                        <div class="detail-content">公司2</div>
                    </div>
                </div>
                <div class="action-group">
                    <button class="action-btn primary-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                        接受职位
                    </button>
                    <button class="action-btn secondary-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                        </svg>
                        收藏职位
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 动态筛选功能
        document.getElementById('statusFilter').addEventListener('change', function() {
            const status = this.value;
            document.querySelectorAll('.result-card').forEach(card => {
                card.style.display = (status === 'all' || card.dataset.status === status) 
                    ? 'block' 
                    : 'none';
            });
        });
        // 卡片交互动画
        document.querySelectorAll('.result-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-5px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0) scale(1)';
            });
        });
        // 倒计时更新
        function updateDeadlines() {
            document.querySelectorAll('.deadline-countdown').forEach(element => {
                const deadline = new Date(element.nextSibling.textContent.trim());
                const diff = deadline - new Date();
                const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
                
                element.textContent = days > 0 
                    ? `⏳ 剩余${days}天` 
                    : '⚠️ 已过期';
                element.style.color = days > 3 
                    ? 'var(--success)' 
                    : days > 0 
                        ? 'var(--warning)' 
                        : 'var(--error)';
            });
        }
        setInterval(updateDeadlines, 3600000); // 每小时更新
        updateDeadlines();
    </script>
<script src="consequence.js"></script>
    
   
</body>
</html>